<template>
  <div class="box">
     <SearchVue></SearchVue>
     <div class="content">
         <BannerVue></BannerVue>
         <NavBarVue></NavBarVue>
         <SecondsKillVue></SecondsKillVue>
         <DetailVue class="detail"></DetailVue>
     </div>
     <FooterBarVue></FooterBarVue>
  </div>
</template>

<script>
import BannerVue from '@/components/Banner.vue'
import SearchVue from '@/components/Search.vue'
import NavBarVue from '@/components/NavBar.vue'
import SecondsKillVue from '@/components/SecondsKill.vue'
import DetailVue from '@/components/Detail.vue'
import FooterBarVue from '@/components/FooterBar.vue'

export default {
   name:"HomeVue",
   components:{
    BannerVue,SearchVue,NavBarVue,SecondsKillVue,DetailVue,FooterBarVue
   }
}
</script>

<style scoped>

.box{
   display: flex;
   width: 100%;
   height: 100%;
   flex-direction: column;
   background-color: rgba(236, 241, 241, 0.737);
}
.content{
   flex: 1;
   overflow: auto;
}
.detail{
   margin-top: .625rem;
}
</style>